<script setup>
import {BaseImgUrl} from "../utils/lshttp";
import {bindBoxPosterHook} from "./blind_box_poster_hook";

const {
  okBack,
  listImage,
  scrollTop,
  onScroll,
  isShow,
  toGetMaker,
  value,
  change
} = bindBoxPosterHook()
</script>

<template>
  <view class="navbar" :style="{background: `rgba(251, 110, 104, ${(scrollTop)/88 > 0.92 ? 0.92 : (scrollTop-20)/88})`}">
    <up-status-bar></up-status-bar>
    <view class="back_content">
      <view style="padding-left: 10rpx;"></view>
      <view @click="okBack" style="padding: 20rpx;z-index: 100">
        <up-icon name="arrow-left"
                 color="white"
                 size="16"></up-icon>
      </view>
      <text
          style="font-weight: 400;font-size: 32rpx;line-height: 44px;height:44px;position: absolute;width: 100%;text-align: center;color: #ffffff">
        生成分享海报
      </text>
    </view>
  </view>
  <scroll-view scroll-y="true" @scroll="onScroll" >
    <view style="background-color:#FEF3CE">
      <image :src="BaseImgUrl +'/mh/mhyq3.png'"
             style="width: 750rpx;height: 710rpx;position: absolute;z-index: 0"></image>
      <up-status-bar></up-status-bar>
      <view style="height: 86px"></view>
      <image :src="BaseImgUrl +'/mh/mhyq4.png'"
             style="width: 424rpx;height: 104rpx;margin-left: 56rpx;position: relative"></image>
      <image :src="BaseImgUrl +'/mh/mhyq5.png'"
             style="width: 504rpx;height: 82rpx;margin-left: 36rpx;margin-top: 20rpx;position: relative"></image>
      <view
          style="min-height: 246rpx;width:710rpx;left:20rpx;position: relative;margin-top: 38rpx;background: #fde8a2;border-radius: 30rpx">
        <image :src="BaseImgUrl +'/mh/mhyq2.png'"
               style="width: 710rpx;height: 246rpx;position: absolute;z-index: 0;"></image>
        <view
            style="position: relative;color: white;font-size: 38rpx;margin-left: 26rpx;padding-top: 10rpx;display: flex">
          <view style="margin-top: 10rpx">给朋友说点什么</view>
          <view style="flex: 1"></view>
          <view style="width: 208rpx;height: 64rpx;background: linear-gradient( 270deg, #FF4E5E 0%, #FFB760 100%);
        border-radius: 60rpx;text-align: center;font-size: 32rpx;line-height: 64rpx;margin-right: 12rpx"
                @click="change">
            换一个
          </view>
        </view>
        <view style="margin-top: 30rpx"></view>
        <view
            style="position: relative;background: linear-gradient( 94deg, #FD6661 0%, #FFB760 100%);border-radius: 30rpx;margin-right: 1rpx;
display: flex;flex-direction: column;align-items: center">
          <view
              style="background-color: #FFFFFF;border-radius: 20rpx;height: 360rpx;width: 670rpx;padding: 20rpx;display: flex;position: relative">
            <image :src="BaseImgUrl +'/mh/mhyq7.png'" style="width: 48rpx;height: 48rpx;"></image>
            <view
                style="flex: 1;margin-left: 10rpx;color:#888888;font-size: 28rpx;line-height: 56rpx;margin-top: -16rpx;letter-spacing: 2rpx">
              <!--            您可以在这里输入朋友在海报中看到的话。 例如：宝，帮我助力开个盲盒，我要喝免费的下午茶。帮我助力后你可以免费点一餐外卖哦。-->
              <up-textarea
                  v-model="value"
                  placeholder="请输入内容"
                  border="none"
                  :autoHeight="true"
                  count
                  height="320rpx"
                  maxlength="100"
                  :customStyle="{backgroundColor: '#FFFFFF',height: '350rpx',fontSize:'68rpx',lineHeight:'68rpx'}">
              </up-textarea>
            </view>
            <!--          <view style="position: absolute;bottom: 16rpx;right: 16rpx;font-size: 24rpx;display: flex;color: #888888">-->
            <!--            <text style="color: #FF564D">168</text>-->
            <!--            /-->
            <!--            <text>200</text>-->
            <!--          </view>-->
          </view>
          <view
              style="width: 400rpx;height: 112rpx;position: relative;display: flex;align-items: center;justify-content: center;margin-top: 26rpx;margin-bottom: 28rpx">
            <image :src="BaseImgUrl +'/mh/mhyq6.png'" style="width: 400rpx;height: 112rpx;;position: absolute"></image>
            <image :src="BaseImgUrl +'/mh/mh8.png'" class="hands"
                   style="width: 100rpx;height: 90rpx;right: -26rpx;top:38rpx;position: absolute"></image>
            <view style="position: relative;color: white;font-size: 36rpx;" @click="toGetMaker">点击生成海报</view>
          </view>
        </view>
      </view>
      <view
          style="min-height: 246rpx;width:710rpx;left:20rpx;position: relative;margin-top: 38rpx;background: #fde8a2;border-radius: 30rpx">
        <image :src="BaseImgUrl +'/mh/mhyq1.png'"
               style="width: 710rpx;height: 246rpx;position: absolute;z-index: 0;"></image>
        <view
            style="position: relative;color: white;font-size: 38rpx;margin-left: 26rpx;padding-top: 18rpx;display: flex">
          <view style="margin-top: 10rpx">盲盒百分百会出以下奖品哦</view>
          <view style="flex: 1"></view>
        </view>
        <view style="margin-top: 30rpx"></view>
        <view
            style="position: relative;background: linear-gradient( 94deg, #FD6661 0%, #FFB760 100%);border-radius: 30rpx;margin-right: 1rpx;
display: flex;flex-direction: column;align-items: center">
          <view
              style="background-color: #FFEEDA;border-radius: 20rpx;height: 460rpx;width: 670rpx;padding: 20rpx;display: flex">
            <up-grid :border="false" gap="10" align="center">
              <up-grid-item
                  v-for="(image,index) in listImage"
                  :key="index">
                <view style="position: relative;width: 168rpx;height:180rpx;">
                  <image :src="BaseImgUrl +'/mh/mh4.png'" style="width: 168rpx;height:180rpx;position: absolute"></image>
                  <view class="element-to-animate"
                        style="position: relative;display: flex;flex-direction: column;;align-items: center;margin-top: 50rpx;width: 156rpx">
                    <view style="color: #E13218;font-size: 32rpx;font-weight: bold;margin-top: 6rpx">
                      6元
                    </view>
                    <view style="color: #E13218;font-size: 20rpx;font-weight: bold;margin-top: 8rpx">
                      现金抵用券
                    </view>
                  </view>
                </view>
              </up-grid-item>
            </up-grid>
          </view>

          <view style="width: 294rpx;height: 68rpx;position: relative;display: flex;align-items: center;justify-content: center;margin-top: 26rpx;margin-bottom: 28rpx;
          border-radius: 200rpx 200rpx 200rpx 200rpx;border: 2rpx solid #FFD0A6">
            <view style="position: relative;color: #FFF2C4;font-size: 28rpx;" @click="isShow = true">查看全部盲盒奖励
            </view>
          </view>
        </view>
      </view>
      <view
          style="min-height: 246rpx;width:710rpx;left:20rpx;position: relative;margin-top: 38rpx;background: #fde8a2;border-radius: 30rpx">
        <image :src="BaseImgUrl +'/mh/mhyq1.png'"
               style="width: 710rpx;height: 246rpx;position: absolute;z-index: 0;"></image>
        <view
            style="position: relative;color: white;font-size: 38rpx;margin-left: 26rpx;padding-top: 18rpx;display: flex">
          <view style="margin-top: 10rpx">活动规则说明</view>
          <view style="flex: 1"></view>
        </view>
        <view style="margin-top: 30rpx"></view>
        <view
            style="position: relative;background: linear-gradient( 94deg, #FD6661 0%, #FFB760 100%);border-radius: 30rpx;margin-right: 1rpx;
display: flex;flex-direction: column;align-items: center">
          <view style="background-color: #FFEEDA;border-radius: 20rpx;min-height: 460rpx;width: 670rpx;padding: 20rpx;">
            <view v-for="(item,index) in 8" :key="index"
                  style="position: relative;width: 700rpx;display: flex;padding-top: 20rpx;">
              <image :src="BaseImgUrl +'/mh/mh13.png'" style="width: 32rpx;height: 32rpx;margin-right: 10rpx;"></image>
              <view
                  style="color: #606060;width: 588rpx;word-break:break-all;line-height: 39rpx;letter-spacing: 2rpx;font-size: 26rpx;margin-top: -3rpx">
                每3位朋友通过您分享的海报为您助力，您可获得一次开启盲盒的机会。
              </view>
            </view>
          </view>
          <view style="height: 20rpx"></view>
        </view>
      </view>
      <view style="height: 60rpx"></view>
    </view>
  </scroll-view>
  <up-popup :show="isShow" mode="bottom" bg-color="#FFFFFFF1" round="10" @close="isShow=false" closeable>
    <view style="display: flex;flex-direction: column;align-items: center">
      <view style="font-size: 32rpx;color: #000000;line-height: 88rpx;font-weight: bold">奖品列表</view>
      <view style="height: 1rpx;background-color: #e8e8e8;width: 100%"></view>
      <view style="height: 680rpx">
        <scroll-view scroll-y="true">
          <view v-for="item in 38" :key="item" style="position: relative;display: flex;align-items: center;margin: 0 18rpx;padding: 20rpx 10rpx;
border-bottom: #e8e8e8 solid 1px">
            <view
                style="position: relative;width: 168rpx;height:180rpx;display: flex;align-items: center;justify-content: center">
              <image :src="BaseImgUrl +'/mh/mh4.png'" style="width: 168rpx;height:180rpx;position: absolute"></image>
              <view style="position: relative;display: flex;flex-direction: column;;align-items: center;width: 168rpx">
                <view style="color: #E13218;font-size: 32rpx;font-weight: bold;margin-top: 6rpx">
                  6元
                </view>
                <view style="color: #E13218;font-size: 20rpx;font-weight: bold;margin-top: 8rpx">
                  <view>现金抵用券</view>
                </view>
              </view>
            </view>
            <view style="flex: 1">
              <view style="font-size: 30rpx;font-weight: bold">6元现金抵用券</view>
              <view style="font-size: 24rpx;color: #999999;margin-top: 16rpx">
                现金抵用券6元现金抵用券6元现金抵用券6元现金抵用券6元现金抵用券6元现金抵用券
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </up-popup>
</template>
<style>
page {
  height: 100%;
  width: 100%;
}

</style>
<style scoped lang="scss">
.navbar {
  position: fixed;
  z-index: 1000;
  width: 100%;

  .back_content {
    display: flex;
    align-items: center;
    height: 44px;
  }
}

/* 定义放大缩小动画 */
@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.28); /* 放大1.5倍 */
  }
}

/* 应用动画到元素   模拟拉黑用户进入店铺详情页面操作，优化订单页面逻辑，优化店铺详情页面*/
.hands {
  animation: zoomInOut 1s infinite; /* 动画名称，每次动画持续2秒，并且无限循环 */
}

::v-deep .u-textarea__field {
  line-height: 46rpx !important;
  font-size: 28rpx !important;
  color: #888888;
  background-color: #FFFFFF;
  overflow: hidden;
}

::v-deep .u-textarea__count {
  color: #FF564D;
  font-size: 24rpx;
}
</style>